@charset "utf-8";
/* CSS Document */

* {
  box-sizing: border-box;
}
body {
font-family:'antonioregular';
  font-size: 70%;
  background: #ccc;
  line-height: 1.2;
  margin: 3em;
}
img {
  width: 100%;
}
article {
  padding: 10px;
  border: 1px solid #999;
  border-radius: 7px;
  background: #fff;
 
}
a:link,
a:visited {
  color: black;
}
h1 {
    margin-top: 0;
    margin-left: 0.75rem;
}
main {
 column-count: 4;
  column-gap: 20px; 
   margin-left: 60px;
  margin-right: 50px;
  margin-bottom: 50px;
  margin-top: 40px;
  color: #A09F9F;
}
article {
  break-inside: avoid-column;
  margin-bottom: 1rem; 
}




/* =========================================================
   MOBILE LAYOUT FIX
   Keeps the desktop layout unchanged.
   On phones: one clean column, media first, text underneath.
   ========================================================= */
@media screen and (max-width: 700px) {

  /* Stop the page from creating narrow overflowing text areas */
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Main white content cards */
  .text-card {
    width: auto !important;
    max-width: none !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
    padding: 14px !important;
  }

  /* Every desktop two-column section becomes one mobile column */
  .text-columns {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    width: 100% !important;
  }

  .text-columns > div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  /*
     If the desktop section is TEXT | IMAGE,
     move the image block above the text on mobile.
     Sections already arranged IMAGE | TEXT stay as they are.
  */
  .text-columns:has(> div:last-child img) > div:last-child {
    order: -1 !important;
  }

  /* Keep images, slideshows and videos inside the screen */
  .text-columns img,
  .text-columns iframe,
  .slideshow,
  .w3-content,
  .w3-display-container {
    max-width: 100% !important;
  }

  .text-columns img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* Textile study: one artwork card under another */
  main {
    column-count: 1 !important;
    -webkit-column-count: 1 !important;
    -moz-column-count: 1 !important;
    columns: 1 !important;

    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    margin: 22px 0 0 0 !important;
    padding: 0 !important;
  }

  main article {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;

    margin: 0 0 18px 0 !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  main article img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 10px 0 !important;
  }

  /* Prevent long text from spilling outside the white card */
  .text-card,
  .text-card p,
  .text-card strong,
  main article,
  main article p {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
  }

  /* Make the footer fit a phone screen */
  #FOOTER iframe {
    width: 100% !important;
    max-width: 400px !important;
  }
}